<template>
    <div id="Login">
        <div id="tite">
            <img style="padding-top:5px;width:50px;height:50px" src="../assets/images/d.png">
            <span
                style="display: inline-block;font-size: 30px;color: #24ACF2;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成都军区总医院his后台系统</span><br>
            <span style="display: inline-block;font-size: 20px;color: #24ACF2">Chengdu Military Region General Hospital
                HIS background system</span>
        </div>
        <div id="content">
            <h4 style="margin-top:20px;padding-top:20px">欢迎登录HIS系统</h4><br />

            <form action="/login" method="get">
                <input type="text" id="username" placeholder="请输入账号" v-model="username" /><br /><br />
                <input type="password" id="password" placeholder="请输入密码" v-model="password" /><br /><br />
                <input type="button" id="denglu" @click="login" value="登录" />
            </form>
            <p id="forget" @click="showForget" style="cursor:pointer">忘记密码?</p>
            <!-- <button id="bt" @click="bt">新增</button> -->
            <br>
            <p v-show="isShow" style="margin-top:-10px">
                <input type="text" id="email" placeholder="请输入邮箱" v-model="emai" />&nbsp;
                <input type="button" id="send" v-model="btn" @click="send" :disabled="dis" />
            </p>
            <!-- <div style="margin-top: 10px;" id="res"> -->
            <br>
            <p v-show="isShow2" style="margin-top:-20px">
                <input type="text" id="activecode" placeholder="请输入验证码" v-model="activecode"
                    style="width:150px" />&nbsp;
                <input type="button" id="reset" value="重置" @click="reset" />
            </p>

            <!-- </div> -->
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: "",
                password: "",
                //vis:true,
                dis: false, //初始可点击
                //vis2:"",
                btn: "发送",
                emai: "",
                activecode: "",
                isShow: false,
                isShow2: false,
            }
        },
        methods: {
            //登录操作
            login() {
                this.$http.get("http://localhost:8088/login", {
                        params: {
                            username: this.username,
                            password: this.password
                        }
                    })
                    .then(res => {
                        console.log(res.data)
                        if (res.data.success) {
                            console.log(res.data.data)
                            //登录成功之后将返回的jwt存入localstorage
                            localStorage.setItem("jwt", res.data.data)
                            this.$message({
                                showClose: true,
                                message: res.data.message,
                                type: 'success'
                            });
                            //登陆成功后发送请求去后端得到职位和医生id存入localstorage
                            this.$http.get("http://localhost:8088/getDoctorId", {
                                    params: {
                                        username: this.username
                                    }
                                })
                                .then(resp => {
                                    localStorage.setItem("doctorId", resp.data.data.doctorId)
                                    localStorage.setItem("position", resp.data.data.doctorPosition)
                                    console.log(localStorage.getItem("doctorId"))
                                    console.log(localStorage.getItem("position"))
                                })
                            this.$router.push("/main")
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.message,
                                type: 'error'
                            });
                        }

                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            showForget() {
                this.isShow = true
                // this.vis="visible"
                // document.getElementById("forg").display
            },
            send() {
                this.isShow2 = true
                this.dis = true; //点发送按钮将button设为不可点击
                // this.vis="visible"//将验证码输入框显示出来
                var i = 10
                var interval = setInterval(function () {
                    i--;
                    this.btn = i
                    if (i <= 0) {
                        clearInterval(interval);
                        this.dis = false; //设置为可点
                        this.btn = "发送" //值变为发送
                    }
                }, 1000)
                this.$http.get("http://localhost:8088/email", {
                        params: {
                            email: this.emai
                        }
                    })
                    .then(resp => {
                        console.log(resp.data.message)
                        if (resp.data.success == true) {
                            alert("成功找到")
                            localStorage.setItem("doctorId", resp.data.data.doctorId)
                            console.log("医生id为" + resp.data.data.doctorId)
                        } else {
                            alert(resp.data.message)
                        }
                    })
                    .catch(err => {
                        console.log(err.data)
                    })
            },
            reset() {
                this.$http.get("http://localhost:8088/reset", {
                        params: {
                            doctorId: localStorage.getItem("doctorId"),
                            activeCode: this.activecode
                        }
                    })
                    .then(resp => {
                        alert(resp.data.message)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            bt() {
                console.log(this.username)
                this.$http.get("http://localhost:8088/addUser", {
                        params: {
                            username: this.username,
                            password: this.password
                        }
                    })
                    .then(res => {
                        console.log(res.data)
                        if (res.data.success == true) {
                            console.log(res.data.message)
                        }

                    })
                    .catch(err => {
                        console.log(err)
                    })
            }

        }
    }
</script>

<style>
    #tite {
        /* padding-top: 100px; */
        vertical-align: middle;
        margin-left: 300px;

    }

    #title {
        font-family: "新宋体";
        position: absolute;
        color: brown;
        font-size: 60px;
        text-align-last: center;
        left: 40%;
        top: 10%;
    }

    #content {
        top: 50%;
        /*顶部到元素*/
        left: 30%;
        width: 30%;
        height: 400px;
        border-radius: 25px;
        /*边框圆角*/
        margin-top: -200;
        /*边缘到底部*/
        margin-left: 400px;
        background-color: #d7eafad3;
        text-align-last: center;
        /*这里做一个半透明效果*/
        filter: alpha(Opacity=60);
        -moz-opacity: 0.8;
        opacity: 0.8;
    }

    #username {
        color: #5fa1cc;
        font-size: 15px;
        text-align: center;
        border-radius: 25px;
        /*边框圆角*/
        outline: none;
        border: none;
        height: 35px;
        width: 280px;
    }

    #password {
        color: #3498db;
        font-size: 15px;
        text-align: center;
        border-radius: 25px;
        outline: none;
        border: none;
        height: 35px;
        width: 280px;
    }

    #email {
        color: #3498db;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        outline: none;
        border: none;
        height: 25px;
        width: 150px;
        margin-top: -130px;
        margin-left: 30px;
        /* visibility: hidden; */
        display: inline-block;
    }

    #send {
        background: #d4a797;
        border-radius: 5px;
        border: none;
        /*边框宽度0*/
        height: 20px;
        width: 40px;
        /* padding:5px 10px;上下填充10 左右5 */
        font-size: 10px;
        /* padding: 1px 1px; */
        color: #fff;
        cursor: pointer;
        outline: none;
        display: inline-block;
        margin-left: 10px;
    }

    #activecode {
        color: #3498db;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        outline: none;
        border: none;
        height: 25px;
        width: 100px;
        margin-top: -130px;
        margin-left: 30px;
        /* visibility: hidden; */
        display: inline-block;
    }

    #reset {
        background: #d4a797;
        border-radius: 5px;
        border: none;
        /*边框宽度0*/
        height: 20px;
        width: 40px;
        /* padding:5px 10px;上下填充10 左右5 */
        font-size: 10px;
        /* padding: 1px 1px; */
        color: #fff;
        cursor: pointer;
        outline: none;
        display: inline-block;
        margin-left: 10px;
    }

    #denglu {
        background: #F1A992;
        border-radius: 20px;
        border: none;
        /*边框宽度0*/
        height: 40px;
        width: 80px;
        /* padding:5px 10px;上下填充10 左右5 */
        font-size: 18px;
        padding: 5px 18px;
        color: #fff;
        cursor: pointer;
        outline: none;
        display: block;
        margin-left: 155px;
    }

    #content h4 {
        color: white;
        font-size: 30px;
    }

    #forget {
        font-size: 12px;
        color: rgb(150, 144, 144);
        margin-right: 1px;
        margin-bottom: 5px;
        cursor: pointer;
        text-decoration-line: underline;
    }
</style>